<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <title>账户设置</title>
  <link rel="stylesheet" href="style.css">
  <style>
    :root{ --bg:#090909; --panel:#0f0f0f; --neon:#39ff14; --muted:#62b86b }
    html,body{height:100%;margin:0}
    body{background:linear-gradient(180deg,#070707,#0b0b0b);color:var(--neon);font-family: "Courier New", Courier, monospace;display:flex;align-items:flex-start;justify-content:center;padding:28px}
    .container{width:100%;max-width:560px;background:rgba(0,0,0,0.6);border:1px solid rgba(57,255,20,0.08);box-shadow:0 8px 40px rgba(57,255,20,0.03);padding:16px;border-radius:6px}
    h1{margin:4px 0 8px;font-size:1.1rem;color:var(--neon);text-align:left}
    h2{margin:12px 0 6px;font-size:0.95rem;color:var(--muted);letter-spacing:1px}
    label{display:block;font-size:0.85rem;color:#8ff18a;margin-top:8px}
  input{width:100%;background:transparent;color:var(--neon);border:1px solid rgba(57,255,20,0.12);padding:8px 10px;margin-top:6px;border-radius:4px;outline:none}
  input::placeholder{color:rgba(57,255,20,0.28)}
    input:focus{box-shadow:0 0 8px rgba(57,255,20,0.06);border-color:rgba(57,255,20,0.28)}
    button{background:transparent;border:1px solid rgba(57,255,20,0.16);color:var(--neon);padding:8px 10px;border-radius:4px;font-weight:700;cursor:pointer}
    button:hover{background:rgba(57,255,20,0.03)}
  .row{display:flex;gap:8px}
    .result{margin-top:10px;padding:8px;border-radius:6px;display:none;font-size:0.9rem}
    .result.ok{background:rgba(57,255,20,0.06);color:var(--neon);border:1px solid rgba(57,255,20,0.06)}
    .result.err{background:rgba(255,30,30,0.04);color:#ff8b8b;border:1px solid rgba(255,30,30,0.04)}
    a.back{display:inline-block;margin-top:14px;color:var(--neon);text-decoration:none;font-size:0.9rem}
    hr{border:none;border-top:1px solid rgba(57,255,20,0.04);margin:14px 0}
    @media (max-width:420px){body{padding:14px}.container{padding:12px}}
  </style>
</head>
<body>
  <div class="container">
    <h1>账户设置</h1>
    <div id="status" class="result"></div>

    <section id="change-username">
      <form action="/config/username" method="POST" id="usernameForm">
        <input name="newUsername" placeholder="新的用户名" required autocomplete="off">
        <div style="height:8px"></div>
        <button type="submit">更改用户名</button>
      </form>
    </section>

    <hr style="border:1px solid #002200;margin:18px 0">

    <section id="change-password">
      <form action="/config/password" method="POST" id="passwordForm">
        <input type="password" name="currentPassword" placeholder="当前密码" required autocomplete="off">
        <input type="password" name="newPassword" placeholder="新密码" required autocomplete="off" style="margin-top:8px">
        <input type="password" name="confirmPassword" placeholder="确认新密码" required autocomplete="off" style="margin-top:8px">
        <div style="height:8px"></div>
        <button type="submit">更改密码</button>
      </form>
    </section>

    <div style="text-align:center;margin-top:18px">
      <a href="/" style="color:#00ff00;text-decoration:none">返回聊天</a>
    </div>
  </div>

  <script>
    // Show query results from redirect params
    const params = new URLSearchParams(window.location.search);
    const status = document.getElementById('status');
    if (params.get('success') === 'username') {
      status.className = 'result ok'; status.textContent = '用户名已更新'; status.style.display='block';
    } else if (params.get('success') === 'password') {
      status.className = 'result ok'; status.textContent = '密码已更新'; status.style.display='block';
    } else if (params.get('error')) {
      status.className = 'result err';
      const e = params.get('error');
      if (e === 'exists') status.textContent = '用户名已存在';
      else if (e === 'invalid') status.textContent = '输入无效';
      else if (e === 'badcurrent') status.textContent = '当前密码错误';
      else status.textContent = '发生错误';
      status.style.display='block';
    }
  </script>
</body>
</html>
